<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery.js"></script>
    <link rel="stylesheet" href="../bootstrap-3.4.1/dist/css/bootstrap.css">
    <script src="../bootstrap-3.4.1/dist/js/bootstrap.js"></script>
</head>
<style>
    * {
        margin: auto;
        padding: 0;
    }

    .box {
        width: 100%;
        height: 100vh;
        background-color: #F2FAFE;
        text-align: center;
        position: relative;
    }

    .title {
        width: 400px;
        margin: auto;
        background-color: #EFEFEF;
        border-bottom-left-radius: 100px;
        border-bottom-right-radius: 100px;
    }

    .title h1 {
        text-align: center;
    }

    #content {
        width: 1200px;
        margin: auto;
        text-align: center;
    }

    button {
        width: 70px;
        height: 70px;
        margin: 10px;
        background-color: white;
    }

    #qian {
        width: 150px;
        height: 60px;
    }

    #add {
        width: 300px;
        height: 300px;
        background-color: pink;
        text-align: center;
        position: absolute;
        top: 23%;
        left: 43%;
        display: none;
    }

    input {
        width: 240px;
        height: 40px;
        padding-left: 20px;
        margin-top: 25px;
    }
</style>

<body>
    <div class="box">

        <div class="title">
            <h1>六号放映厅</h1>
        </div>
        <button id="addList">添加行列</button>
        <div id="add">
            <input type="text" placeholder="行" id="hang">
            <input type="text" placeholder="列" id="lie">
            <button id="guanbi">关闭</button>
            <button id="fabu">添加</button>
        </div>
        <div id="content"></div>
        <div id="main"></div>
    </div>
</body>
<script>
    var field = []
    $(function () {
        // 显示添加
        $('#addList').click(function () {
            $('#add').show()
        })
        // 关闭
        $('#guanbi').click(function () {
            $('#add').hide()
        })
        $('#fabu').click(fabuList)
        show()
        colorShow()
        colorFn()
    })

    // 发布
    function fabuList() {
        var hang = $('#hang').val()
        var lie = $('#lie').val()
        var field = saveData('field')
        for (let i = 0; i < lie; i++) {
            field.push([])
            for (let j = 0; j < hang; j++) {
                field[i].push({
                    status: 0,
                    name: `${i + 1}排${j + 1}列`,
                    price: '30￥'
                })

            }
        }
        saveData('field', field)
        show()
    }
    // 页面渲染
    function show() {
        let str = ``
        let str1 = ``
        let rendering = saveData('field')
        for (let i in rendering) {
            for (let j in rendering[i]) {
                str += `
               <div style="width: 70px;height: 70px background:white;float:left" dataH='${i}' dataL='${j}' onclick="colorShow(${i}${j},this)">${Number(i) + 1}排 ${Number(j) + 1}坐 </div>
               `
            }
            // str += `<p style="clear:both"></p>`
            str += `<br />`
        }
        $('#content').html(str)

    }

    function colorFn() {
            let indexH = $(event.target).attr('dataH')
            let indexL = $(event.target).attr('dataL')
            let rendering = saveData('field')
            if (rendering[indexH][indexL].status == 3) {
                rendering[indexH][indexL].status = 0
            } else if (rendering[indexH][indexL].status == 0) {
                rendering[indexH][indexL].status = 3

            }
            saveData('field', rendering)
            colorshow()
            // priceFn()

        }


    // 显示座位颜色
    function colorShow(index,obj) {
        let rendering = saveData('field')
        $(obj).css('background', 'red')
        var strPrice = ''

        for (let i in rendering) {
            for (let j in rendering[i]) {
                strPrice += `<button>${Number(i) + 1}排 ${Number(j) + 1}座 ${rendering[i][j].price}</button>`
            }
        }
        console.log(strPrice);
        $('#main').html(strPrice)
        // for (let i in rendering) {
        //     for (let j in rendering[i]) {
        //         if (rendering[i][j].status == 0) {
        //             $('#content button').each(function (index, item) {
        //                 if ($(item).attr('datah') == i && $(item).attr('datal') == j) {
        //                     $(item).css('background', 'white')
        //                 }
        //             })
        //         } else if (rendering[i][j].status == 1) {
        //             $('#content button').each(function (index, item) {
        //                 if ($(item).attr('datah') == i && $(item).attr('datal') == j) {
        //                     $(item).css('background', 'red')
        //                 }
        //             })
        //         }
        //         else if (rendering[i][j].status == 2) {
        //             $('#content button').each(function (index, item) {
        //                 if ($(item).attr('datah') == i && $(item).attr('datal') == j) {
        //                     $(item).css('background', '#ccc')
        //                 }
        //             })
        //         }
        //         else if (rendering[i][j].status == 3) {
        //             $('#content button').each(function (index, item) {
        //                 if ($(item).attr('datah') == i && $(item).attr('datal') == j) {
        //                     $(item).css('background', 'green')
        //                 }
        //             })
        //         }
        //     }
        // }

    }

    // 本地存储
    function saveData(keyName, data = null, ispush = false) {

        let fieldData = localStorage.getItem(keyName) ? JSON.parse(localStorage.getItem(keyName)) : []
        if (data) {
            if (ispush) {
                field.push(data)
                localStorage.setItem(keyName, JSON.stringify(fieldData))
            } else {
                localStorage.setItem(keyName, JSON.stringify(data))
            }
        }
        return fieldData
    }


</script>

</html>